<template>
  <div class="pay-success">
    <img src="@/assets/querendingdan04.png" class="logo" alt="">
    <span class="goods-name" v-show="goods.length == 1">{{title}}</span>
    <span class="goods-name" v-show="goods.length > 1">购物车商品购买成功</span>
    <span class="price">{{info.total}}元</span>
    <span class="btn" @click="router({path: './goods'})">返回商城</span>
  </div>
</template>

<script>
  import { getOrderDetails } from "@/api/api";
  export default {
    components: {
    },
    data () {
      return {
        info: {},
        goods: [],
        title: '',
      }
    },
    created () {
      this.order_id = this.$route.query.order_id
      this.get_order_details()
    },
    methods: {
      get_order_details() {
        getOrderDetails(this.order_id).then((res) => {
          if(res.data.code == 200){
            this.info = res.data.data
            this.goods = this.info.goods
            this.title = this.goods[0].title
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.pay-success
  width 100%
  height 100vh
  background-color #fff
  .logo
    position absolute
    width 5.8rem
    top 7.5rem
    left 50%
    margin-left -2.9rem
  .goods-name
    position absolute
    width 80%
    left 10%
    text-align center
    color #333
    font-weight 500
    font-size 1.5rem
    top 20.5rem
  .price
    position absolute
    text-align center
    color #000
    font-weight bold
    font-size 2.5rem
    top 24rem
    width 100%
  .btn
    width 16rem
    height 4rem
    line-height 4rem
    text-align center
    left 50%
    margin-left -8rem
    position absolute
    top 31.6rem
    border: 1px solid #172F6D
    background-color #fff
    color #172F6D
    border-radius 100px
    font-size 1.6rem
    font-weight 500
</style>
